<template>
  <div>
    <el-card>
      <div class="box">
        <Breade first="文章管理" second="文章分类"></Breade>
        <el-button type="primary" @click="addFn">添加</el-button>
      </div>
      <!-- 文章分类表格 -->
      <el-table
        border
        :data="artlist"
        :model="form"
        style="width: 100%; margin: 20px 0"
      >
        <el-table-column label="序号" width="180" type="index">
        </el-table-column>
        <el-table-column prop="cate_name" label="分类名称"> </el-table-column>
        <el-table-column prop="cate_alias" label="分类别名"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button type="primary" size="mini" @click="editHandle(row.id)">编辑</el-button>
            <el-button size="mini" type="danger" @click="editdelFn(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 添加对话框 -->
    <el-dialog
      @close="close"
      title="添加文章分类"
      :visible.sync="dialogVisible"
      width="35%"
    >
      <el-form ref="addform" :model="form" :rules="addRules">
        <el-form-item label="分类名称" label-width="90px" prop="cate_name">
          <el-input v-model="form.cate_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="分类别名" label-width="90px" prop="cate_alias">
          <el-input v-model="form.cate_alias" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addHandle">确 定</el-button>
      </span>
    </el-dialog>
   <!-- 编辑对话框 -->
    <el-dialog
      title="编辑文章分类"
      :visible.sync="diaeditVisible"
      width="35%"
      @close="close1"
    >
      <el-form ref="editforms" :model="editform" :rules="addRules">
        <el-form-item label="分类名称" label-width="90px" prop="cate_name">
          <el-input v-model="editform.cate_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="分类别名" label-width="90px" prop="cate_alias">
          <el-input v-model="editform.cate_alias" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="diaeditVisible = false">取 消</el-button>
        <el-button type="primary" @click="uptateHandle">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { mapActions, mapState } from 'vuex'
import { addArtlistApi, editartApi, updatecateApi, delcateApi } from '../../api/art'
export default {
  name: '',
  data () {
    return {
      // 添加对话框
      dialogVisible: false,
      // 编辑对话框
      diaeditVisible: false,
      // 反显数组
      editform: {
        id: '',
        cate_name: '',
        cate_alias: ''
      },
      form: {
        cate_name: '',
        cate_alias: ''
      },
      // 校验规则
      addRules: {
        cate_name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
          {
            pattern: /^\S{1,10}$/,
            message: '分类名称必须是1-10位的非空字符串',
            trigger: 'blur'
          }
        ],
        cate_alias: [
          { required: true, message: '请输入分类别名', trigger: 'blur' },
          {
            pattern: /^[a-zA-Z0-9]{1,15}$/,
            message: '分类别名必须是1-15位的字母数字',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created () {
    this.AgetArtlist()
  },
  computed: {
    ...mapState('article', ['artlist'])
  },
  methods: {
    ...mapActions('article', ['AgetArtlist']),
    addFn () {
      this.dialogVisible = true
    },
    // 添加文章分类
    addHandle () {
      /*
      1、预校验
      2、发送请求
      3、刷新页面
      4-关闭对话框
       */
      this.$refs.addform.validate(async (vaild) => {
        const res = await addArtlistApi(this.form)
        if (res.data.code === 0) {
          this.$message({
            type: 'success',
            message: '添加成功'
          })
          this.AgetArtlist()
          this.dialogVisible = false
        }
      })
    },
    // 重置添加文章分类对话框
    close () {
      this.$refs.addform.resetFields()
    },
    // 重置编辑对话框
    close1 () {
      this.$refs.editforms.resetFields()
    },
    // 点击编辑 显示编辑对话框
    async editHandle (id) {
      this.diaeditVisible = true
      const res = await editartApi(id)
      console.log(res)
      this.editform = res.data.data
    },
    // 编辑对话框确定按钮
    uptateHandle () {
      this.$refs.editforms.validate(async (vaild) => {
        if (vaild) {
          const res = await updatecateApi(this.editform)
          if (res.data.code === 0) {
            this.$message({
              type: 'success',
              message: '更新文章分类成功'
            })
            this.AgetArtlist()
            this.diaeditVisible = false
          }
        }
      })
    },
    // 删除文章分类按钮
    async editdelFn (id) {
      const res = await this.$confirm('确定要删除这条数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch((err) => err)
      const { data } = await delcateApi(id)
      if (res === 'confirm') {
        if (data.code === 0) {
          this.$message({
            type: 'success',
            message: '删除成功'
          })
          // 每次都要刷新页面
          this.AgetArtlist()
        }
      }
    }
  }
}
</script>
<style lang='less'  scoped>
.box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
